<template>

  <div>
    <el-row class="params">
      <label class="row-lable">商品编号:</label>
      <el-input style="width:160px" v-model="itemCode"></el-input>
      <el-select v-model="cid" placeholder="请选择" @change="jump(1)" style="width: 160px">
        <el-option v-for="item in cate" :key="item.value" :label="item.cateName"
                   :value="item.cid">
        </el-option>
      </el-select>
      <el-button type="primary" @click="jump(1)">搜索</el-button>
      <el-button type="primary" @click="addADBtn">添加轮播图</el-button>
    </el-row>

    <el-table :data="listData" border highlight-current-row stripe style="width: 100%;margin-top: 20px">
      <el-table-column label="权重">
        <template slot-scope="scope">
          <template>{{scope.row.weight}}</template>
          <br>
          <el-button type="text" @click="openWeight(scope.row)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="itemCode" label="商品编号"></el-table-column>
      <el-table-column label="轮播图图片">
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" style="max-height: 60px;max-width: 60px">
          <el-button type="text" @click="openModImg(scope.row)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="类目">
        <template slot-scope="scope">
          {{scope.row.cateName}}
          <!--<el-button type="text" @click="openModCid(scope.row)">修改</el-button>-->
        </template>
      </el-table-column>
      <el-table-column prop="title" label="商品标题"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--<el-button type="text" @click="modImgBtn(scope.row)">替换商品</el-button>-->
          <!--<br>-->
          <el-button type="text" @click="openDelete(scope.row.advertId)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <template>{{scope.row.remark}}</template>
          <el-button type="text" @click="remarkModBtn(scope.row)">备注</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="color: #999999;padding: 10px 0">（权重数字越大，轮播图排序越靠前）</div>
    <!--备注-->
    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="remarkShow" width="30%">
      <el-form>
        <el-form-item label="备注">
          <el-input v-model="modData.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="remarkShow = false">取 消</el-button>
         <el-button type="primary" @click="modRemark">确 定</el-button>
       </span>
    </el-dialog>

    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="addDiaShow" width="30%">
      <el-form>
        <el-form-item label="商品编号">
          <el-input v-model="itemCode" placeholder="请输入商品编号"></el-input>
        </el-form-item>
        <el-form-item label="权重">
          <el-input v-model="weight"></el-input>
        </el-form-item>
        <el-form-item>
          <lazy-img-upload @onSuccess="newImg"
                           beforeClass="afterUpload"
                           afterClass="afterUpload"
                           quality="50"
                           resize-width="1000"
                           :background-img="imgUrl===''?backImg:imgUrl">
          </lazy-img-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="addDiaShow = false">取 消</el-button>
         <el-button type="primary" @click="newAdvert">确 定</el-button>
       </span>
    </el-dialog>

    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="weightShow" width="30%">
      <el-form>
        <el-form-item label="权重">
          <el-input v-model="modData.weight"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="weightShow = false">取 消</el-button>
         <el-button type="primary" @click="modWeight">确 定</el-button>
       </span>
    </el-dialog>


    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="modImgShow" width="30%">
      <el-form>
        <el-form-item>
          <lazy-img-upload @onSuccess="modDataImg"
                           beforeClass="afterUpload"
                           afterClass="afterUpload"
                           quality="50"
                           resize-width="1000"
                           :background-img=" modData.imgUrl==='' ? backImg:modData.imgUrl">
          </lazy-img-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="modImgShow = false">取 消</el-button>
         <el-button type="primary" @click="modImg">确 定</el-button>
       </span>
    </el-dialog>

    <el-pagination
      background
      @current-change="jump"
      layout="total, prev, pager, next, jumper"
      :pageSize=15
      :total="total">
    </el-pagination>


  </div>

</template>

<script>
  import LazyImgUpload from "../../components/LazyImgUpload"
  import {ajax, addAdvert, deleteAdvert, advertList, modifyAdvert, selMainCate, itemCodeToId} from "../../data/service";

  export default {
    name: "",
    data() {
      return {
        backImg: require('../../assets/scImg1.png'),
        total: 0,
        listData: [],
        page: 1,
        addDiaShow: false,//新增关弹出框
        weightShow: false,
        modItem: false,
        remarkShow: false,
        modImgShow: false,
        itemId: '',
        itemCode: '',//商品编号
        weight: '',
        imgUrl: '',
        remark: '',
        cate: [],
        cid: -1,
        modData: {},//修改的参数对象
        tuijian: { // 推荐是为了下拉框选择，需要放入cate数组里
          cateName: "推荐",
          cid: -1,
          label: "推荐",
          level: 2,
          parentCid: -1,
          weight: 1000
        },
      }
    },
    mixins: [ajax],
    created() {
      this.getList();
      this.getMainCate();
    },
    methods: {
      initModData() {
        //初始化修改用参数
        this.modData = {};
      },
      newImg(url) {//
        this.imgUrl = url;
      },
      modDataImg(url) {
        this.modData.imgUrl = url;
      },
      getList() {
        this.doajax(advertList, {
          page: this.page,
          itemCode: this.itemCode,
          cid: this.cid === undefined ? "" : this.cid
        }, (resp) => {
          this.listData = resp.data;
          this.total = resp.total;
        })
      },
      //添加轮播图
      newAdvert() {
        if(this.imgUrl===undefined || this.imgUrl===''){
           this.error("请上传图片");
           return;
        }

        this.doajax(itemCodeToId, {itemCode: this.itemCode}, res => {
          this.doajax(addAdvert,
            {
              itemId: res.itemId,
              weight: this.weight,
              imgUrl: this.imgUrl,
              cid: this.cid === undefined ? "" : this.cid
            }, (resp) => {
              this.addDiaShow = false;
              this.itemId = '';
              this.weight = '';
              this.imgUrl = '';
              this.itemCode = '';
              this.success("添加成功");
              this.getList();
            });
        });

      },
      //查询主类目
      getMainCate() {
        this.doajax(selMainCate, {}, resp => {
          this.cate = resp.data;
          this.cate.unshift(this.tuijian);
        });
      },
      modWeight() {
        this.doModify();
        this.weightShow = false;
      },
      modImg() {
        this.doModify();
        this.modImgShow = false;
      },
      doModify() {
        this.doajax(modifyAdvert, this.modData, (resp) => {
          this.initModData();//初始化参数
          this.getList();
        })
      },
      openDelete(advertId) {
        this.$confirm('确定删除该广告位吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.doajax(deleteAdvert, {advertId: advertId}, (resp) => {
            this.getList();
            this.success("删除成功")
          });
        }).catch(() => {

        });
      },
      openModCid(row) {

      },
      openModImg(row) {
        this.modData.advertId = row.advertId;
        this.modData.weight = row.weight;
        this.modData.imgUrl = row.imgUrl;
        this.modImgShow = true;
      },
      modRemark() {
        this.doModify();
        this.remarkShow = false;
      },
      remarkModBtn(row) {
        this.modData.advertId = row.advertId;
        this.modData.remark = row.remark;
        this.remarkShow = true;

      },
      addADBtn() {
        this.addDiaShow = true;
        this.value = '';
        this.itemId = '';
        this.weight = '';
      },
      openWeight(row) {
        this.weightShow = true;
        this.modData.advertId = row.advertId;
        this.modData.weight = row.weight;
      },
      jump(val) {
        this.page = val;
        this.getList();
      },
    },
    components: {
      LazyImgUpload
    }
  }
</script>

<style>
  .afterUpload > img {
    width: 80px !important;
    height: 80px !important;
  }

  .el-select > .el-input {
    width: 150px;
    margin: 10px 0;
  }

  .el-select .el-input__inner {
    width: 150px;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  }
</style>
